<template>
    <el-dialog v-model="isOpen" @open="open" title="关联属性" @close="close" style="width: 30%;min-width: 450px">
        <el-button type="primary" @click="addRelation" style="margin-bottom: 10px">新建关联</el-button>
        <el-table ref="table" border v-loading="loading"  :data="data.tableData" header-cell-class-name="headerClass">
            <el-table-column align="center" type="index"  label="序号" width="80px" />
            <el-table-column align="center" prop="attrName" label="属性名" />
            <el-table-column align="center" prop="valueSelect" label="可选值列表" width="150px" show-overflow-tooltip>
                <template #default="scope">
                    <el-tag type="primary">{{scope.row.valueSelect}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template #default="scope">
                    <el-popconfirm title="移除？" @confirm="deleteRelation(scope.row.attrId, scope.row.attrGroupId)"  @cancel="">
                        <template #reference>
                            <el-link type="danger" title="移除">
                                <el-icon :size="15">
                                    <Delete />
                                </el-icon>
                                移除
                            </el-link>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
    <AddAttrGroupRelation ref="addAttrGroupRelation" @reload="queryRelation" :id="transData.id" :openType="transData.openType" />
</template>

<script setup>
    import {ref,reactive,onBeforeUpdate,onUpdated} from 'vue'
    import MySelectOption from '@/components/common/MySelectOption.vue'
    import UploadFile from '@/components/common/UploadFile.vue'
    import AddAttrGroupRelation from '@/views/mall/pms/components/AddAttrGroupRelation.vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    let transData = reactive({})
    let addAttrGroupRelation = ref(null)
    let dataForm = ref(null)
    const emits = defineEmits(['close','reload'])
    const rules = reactive({
        attrGroupName: [{ required: true, message: '请输入分组名', trigger: 'blur' },],
        sort: [{required: true,message: '请输入排序数字', trigger: 'blur'},],
        descript: [{required: true,message: '请输入描述', trigger: 'blur'},],
        icon: [{required: true,message: '请填写图标', trigger: 'blur'},],
    })
    let props = defineProps(['openType','id'])
    let orgName = ref()
    let isOpen = ref(false)
    defineExpose({isOpen})
    let form = reactive({})
    let options = reactive([])
    let caprops = {
        value:"catId",
        label:"name"
    }
    let data = reactive({
        open:false,
        tableData:[],
        type:"",
        id:"",
    });
    function open() {
        if(isOpen.value === true){
            queryRelation()
        }
    }

    function queryRelation(){
        let query = reactive({currentPage:1, pageSize:10, total:0, payload: props.id})
        request.post(`/api/pmsAttrGroup/getRelationAttr`, query).then(resp => {
            data.tableData = resp
        })
    }

    function close(){
        isOpen.value = false
        data.tableData = []
    }
    function handleChange (node){
        form.catalogId = node[node.length-1]
    }
    function deleteRelation(attrId){
        let param = [{attrId: attrId,attrGroupId: props.id}]
        request.post("/api/pmsAttrGroup/deleteRelation", param).then(resp => {
            ElMessage({message: '移除成功！',type: 'success'})
            queryRelation()
        })
    }
    function addRelation() {
        transData.id = props.id
        addAttrGroupRelation.value.isOpen = true
    }
</script>

<style scoped>

</style>